import React from 'react'
import { observer,inject } from 'mobx-react'
import '../style/MV_paly.css'
import { Button,Icon } from 'antd-mobile';
@inject('Video')
@observer
class App extends React.Component{
    componentDidMount(){
        const { Video } = this.props
        Video.getSrc(this.props.history.location.state.id)
        Video.get_data(this.props.history.location.state.id)
        Video.get_lol_ost(this.props.history.location.state.id)
      }
    render(){
        const { Play_address,Play_data,lol_ost } = this.props.Video
        console.log(lol_ost)
        // try{
        //     console.log(lol_ost[0].coverUrl)
        // }catch(e){
            
        // }
        return(
            <div>
                {/* style={{autoplay:'autoplay',controls:"controls",muted:"muted"}} */}
                <video src={Play_address} >
                </video>
                <header>
                    <div className="header_div">
                        <div>
                            <p className="header_p">{Play_data.name}</p>
                            <p className="header_p_p">498万次观看</p>
                        </div>
                        <div className="header_Icon">
                         <Icon type="down" />
                        </div>
                    </div>
                    <ul className="header_ul">
                        <li>
                        <svg t="1567132925291" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2042" width="200" height="200"><path d="M857.28 344.992H592.448c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96A102.72 102.72 0 0 0 857.28 344.992zM128 872V483.04a3.36 3.36 0 0 1 3.36-3.36H208v395.68h-76.64A3.36 3.36 0 0 1 128 872z m767.328-417.088L821.6 843.872a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088v-59.264c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496H857.28a38.72 38.72 0 0 1 38.048 45.888z" p-id="2043"></path></svg>
                        <p className="ul_li_p">62145</p>
                        </li>
                        <li>
                        <svg t="1567133043697" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5917" width="200" height="200"><path d="M828.59008 944.9472L526.3872 739.14368a16.5888 16.5888 0 0 0-18.54464 0L205.64992 944.9472V166.93248c0-40.192 33.4336-72.89856 74.52672-72.89856H754.0736c41.09312 0 74.51648 32.70656 74.51648 72.89856V944.9472zM517.12 707.328c8.98048 0 17.95072 2.6112 25.61024 7.82336L799.56992 890.0608V166.93248c0-24.18688-20.40832-43.86816-45.49632-43.86816H280.1664c-25.088 0-45.49632 19.68128-45.49632 43.86816V890.0608l256.83968-174.91968a45.52704 45.52704 0 0 1 25.61024-7.81312z" p-id="5918"></path><path d="M675.84 408.45312H358.4a15.36 15.36 0 0 1 0-30.72h317.44a15.36 15.36 0 0 1 0 30.72z" p-id="5919"></path><path d="M517.12 567.17312a15.36 15.36 0 0 1-15.36-15.36v-317.44a15.36 15.36 0 0 1 30.72 0v317.44a15.36 15.36 0 0 1-15.36 15.36z" p-id="5920"></path></svg>
                        <p className="ul_li_p">73586</p>
                        </li>
                        <li>
                        <svg t="1567133085091" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6668" width="200" height="200"><path d="M512 799.44c-24.12586667 0-48.2816-2.19413333-71.33546667-6.58453333l-167.84 102.048v-168.96c-87.7888-61.45386667-143.712-155.792-143.712-261.12106667 0-185.41226667 171.1232-335.72693333 382.8864-335.72693333 211.73013333 0 382.88533333 150.31466667 382.88533334 335.72693333S723.72906667 799.44 512 799.44z m0-622.0608c-185.42826667 0-335.7408 128.36693333-335.7408 287.44426667 0 97.6384 57.06133333 183.21493333 142.64 234.78186666V811.52l113.01973333-68.02133333c26.30186667 5.48053333 52.64213333 8.7616 81.18506667 8.7616 185.39946667 0 335.712-128.36693333 335.712-287.43786667C847.7056 305.74506667 697.39413333 177.3792 512 177.3792z m167.8368 263.30026667H344.12906667c-13.16693333 0-24.12693333-10.976-24.12693334-24.12693334 0-13.16693333 10.95893333-24.13866667 24.128-24.13866666h335.70666667c13.20213333 0 24.16106667 10.9728 24.16106667 24.13866666-0.00106667 13.152-10.96 24.128-24.16 24.128z m-287.42613333 95.44533333h239.17546666c13.168 0 24.12586667 10.98986667 24.12586667 24.14186667 0 13.16906667-10.9568 24.1408-24.12586667 24.1408H392.41066667c-13.1648 0-24.1248-10.97173333-24.1248-24.1408 0-13.152 10.96106667-24.14293333 24.1248-24.14293334z m0 0" p-id="6669"></path></svg>
                        <p className="ul_li_p">2456</p>
                        </li>
                        <li>
                        <svg t="1567133142784" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7424" width="200" height="200"><path d="M508.026502 959.293279c-77.657684 0-154.280806-20.361747-223.329415-60.225663-103.712083-59.84704-177.86085-156.490124-208.862935-272.118608C44.831045 511.309268 60.736293 390.517181 120.57003 286.830681c59.859319-103.686501 156.502403-177.86085 272.130887-208.862935 71.194482-19.061125 146.530284-20.360723 217.774909-3.673669 10.426467 2.448772 16.889669 12.875239 14.46648 23.302729-2.423189 10.426467-12.950963 16.877389-23.302729 14.46648-65.085344-15.223726-133.856637-14.049994-198.890816 3.370771C297.119001 143.733589 208.832236 211.494878 154.147776 306.206984c-54.658877 94.724385-69.175499 205.063399-40.848337 310.694181 28.30158 105.630782 96.062869 193.917548 190.787254 248.588705 94.698802 54.645574 204.975395 69.213361 310.681902 40.86164 105.630782-28.313859 193.917548-96.062869 248.576425-190.787254 54.683437-94.712105 69.200058-205.051119 40.873919-310.681902-2.777253-10.350742 3.357468-20.979824 13.709233-23.757077 10.653641-2.713808 21.005406 3.39533 23.757077 13.709233 31.002085 115.640764 15.096836 236.432851-44.7369 340.119351-59.859319 103.686501-156.502403 177.86085-272.130887 208.862935C586.189699 954.168562 546.981722 959.293279 508.026502 959.293279z" p-id="7425"></path><path d="M845.545632 191.172017 729.816864 191.172017c-10.704806 0-19.389606-8.6848-19.389606-19.389606 0-10.704806 8.6848-19.389606 19.389606-19.389606l115.729791 0c10.704806 0 19.389606 8.6848 19.389606 19.389606C864.935238 182.487218 856.250438 191.172017 845.545632 191.172017z" p-id="7426"></path><path d="M845.545632 306.888506c-10.704806 0-19.389606-8.6848-19.389606-19.389606L826.156026 171.782412c0-10.704806 8.6848-19.389606 19.389606-19.389606s19.389606 8.6848 19.389606 19.389606l0 115.716488C864.935238 298.203706 856.250438 306.888506 845.545632 306.888506z" p-id="7427"></path><path d="M508.759189 530.281365c-4.973268 0-9.921977-1.893116-13.709233-5.680373-7.573489-7.573489-7.573489-19.843954 0-27.417443l275.488355-275.488355c7.573489-7.573489 19.843954-7.573489 27.417443 0 7.573489 7.573489 7.573489 19.843954 0 27.417443L522.467399 524.600993C518.681166 528.388249 513.732457 530.281365 508.759189 530.281365z" p-id="7428"></path></svg>
                        <p className="ul_li_p">4567</p>
                        </li>
                    </ul>
                </header>
                <nav>
                    <p className="nav_p">
                        <img src={Play_data.cover} className="nav_p_img"/>
                        <span className="nav_p_span">{Play_data.artistName}</span>
                    </p>
                    <Button type="warning" size="small" inline className="Button">+&nbsp;收藏</Button>
                </nav>
            <footer className="MV_paly_footer">
                   
                  <ul className="ul">
                  <h3>相关推荐</h3>
                   {lol_ost.map(item=>{
                   return(
                   <li key={item.vid} className="footer_ul_li">
                   < img src={item.coverUrl}  className="footer_img"/>
                   <div className="footer_ul_li_div">
                        <p className="footer_ul_li_div_title">{item.title}</p>
                        <p className="footer_ul_li_div_p">{item.creator[0].userName}</p >
                   </div>
                   </li>
                   ) 
                   })}
                   </ul>
            </footer>
            </div>
        )
    }
}
export default App